<template>
  <view class="container">
    <view class="news-list">
      <view
        class="news-item"
        v-for="(item, index) in newsList"
        :key="index"
        @click="toDetail(item.id)"
      >
        <image class="news-cover" :src="item.cover" mode="aspectFill"></image>
        <view class="news-content">
          <view class="news-title">{{ item.title }}</view>
          <view class="news-desc">{{ item.desc }}</view>
          <view class="news-meta">
            <view class="meta-tag" v-if="index % 3 === 0">热门</view>
            <text class="meta-item">{{ item.date }}</text>
            <view class="meta-views">
              <up-icon name="eye" size="14" color="#999"></up-icon>
              <text>{{ item.views }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@mixin text-ellipsis($line: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
}

.container {
  padding: 0;
  background-color: #f8f8f8;
}

.news-list {
  padding: 20rpx;

  .news-item {
    display: flex;
    padding: 25rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
    transition: all 0.3s;

    &:active {
      transform: scale(0.98);
      opacity: 0.9;
    }

    .news-cover {
      width: 220rpx;
      height: 160rpx;
      border-radius: 12rpx;
      margin-right: 20rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    }

    .news-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .news-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        @include text-ellipsis(2);
        line-height: 1.4;
      }

      .news-desc {
        font-size: 26rpx;
        color: #666;
        @include text-ellipsis(2);
        margin: 10rpx 0;
        line-height: 1.5;
      }

      .news-meta {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;

        .meta-tag {
          background-color: #fef0f0;
          color: #f56c6c;
          padding: 4rpx 12rpx;
          border-radius: 6rpx;
          font-size: 22rpx;
          margin-right: 12rpx;
        }

        .meta-item {
          margin-right: 20rpx;
        }

        .meta-views {
          display: flex;
          align-items: center;

          text {
            margin-left: 6rpx;
          }
        }
      }
    }
  }
}
</style>

<script lang="ts" setup>
import { ref } from "vue";
import { onReachBottom } from "@dcloudio/uni-app";

interface NewsItem {
  id: number;
  title: string;
  desc: string;
  cover: string;
  date: string;
  views: number;
}

const newsList = ref<NewsItem[]>([
  {
    id: 1,
    title: "2024年美国留学签证最新政策解读",
    desc: "美国国务院近日公布了2024年留学签证的最新政策，包括DS-160表格更新、面试预约流程优化等内容...",
    cover: "/static/images/f1aff8101ab21895fa418534474acd79.jpeg",
    date: "2024-03-15",
    views: 1256,
  },
  {
    id: 2,
    title: "英国PSW签证延长至3年，留学生就业利好",
    desc: "英国政府宣布将PSW签证有效期从2年延长至3年，为国际留学生提供更长的留英工作时间...",
    cover: "/static/images/f1aff8101ab21895fa418534474acd79.jpeg",
    date: "2024-02-28",
    views: 982,
  },
  {
    id: 3,
    title: "加拿大留学签证申请材料清单(2024版)",
    desc: "本文详细列出了2024年申请加拿大留学签证所需的所有材料，包括资金证明、学习计划等关键文件...",
    cover: "/static/images/f1aff8101ab21895fa418534474acd79.jpeg",
    date: "2024-03-05",
    views: 1563,
  },
  {
    id: 4,
    title: "澳洲留学签证拒签原因分析及应对策略",
    desc: "针对近年来澳洲留学签证常见的拒签原因，我们整理了专业的应对策略和材料准备建议...",
    cover: "/static/images/f1aff8101ab21895fa418534474acd79.jpeg",
    date: "2024-01-20",
    views: 872,
  },
  {
    id: 5,
    title: "日本留学签证办理全流程指南",
    desc: "从在留资格认定到签证申请，详细解析日本留学签证办理的每一个步骤和注意事项...",
    cover: "/static/images/85f83654638ed1c1c3cebd5abadaa526.jpeg",
    date: "2024-02-10",
    views: 1342,
  },
  {
    id: 5,
    title: "日本留学签证办理全流程指南",
    desc: "从在留资格认定到签证申请，详细解析日本留学签证办理的每一个步骤和注意事项...",
    cover: "/static/images/85f83654638ed1c1c3cebd5abadaa526.jpeg",
    date: "2024-02-10",
    views: 1342,
  },
  {
    id: 5,
    title: "日本留学签证办理全流程指南",
    desc: "从在留资格认定到签证申请，详细解析日本留学签证办理的每一个步骤和注意事项...",
    cover: "/static/images/85f83654638ed1c1c3cebd5abadaa526.jpeg",
    date: "2024-02-10",
    views: 1342,
  },
]);

function toDetail(id: number) {
  uni.navigateTo({
    url: `/pages/news/detail?id=${id}`,
  });
}

onReachBottom(() => {
  // 模拟加载更多数据
  const newItems: NewsItem[] = [
    {
      id: newsList.value.length + 1,
      title: "新西兰留学签证申请流程详解",
      desc: "本文将为您详细介绍新西兰留学签证的申请流程，包括所需材料、申请步骤等...",
      cover: "/static/images/news/newzealand.jpg",
      date: "2024-03-10",
      views: 765,
    },
  ];
  newsList.value.push(...newItems);
});
</script>
